<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: pink;
				margin-top: 20px;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var mybtn_r=document.getElementById("btn_r");
				var mybtn_l=document.getElementById("btn_l");
				var mybox=document.getElementById("box");
				
				//声明一个全局变量 ,初始值为50;
				var left=50;
				
				mybtn_l.onclick=function(){
					left=left-20;
					mybox.style.left=left+"px";
					console.log(left);
				}
				mybtn_r.onclick=function(){
					left=left+20;
					mybox.style.left=left+"px";
					console.log(left);
				}
			}
		</script>
	</head>
	<body>
		<input type="button" id="btn_l" value="←" />
		<input type="button" id="btn_r" value="→" />
		<div id="box"></div>
	</body>
</html>
